<template>
    <div class="enter-work-job">
        <div class="job-content">
            <div class="job-header">
                <el-tabs v-model="jobActiveName">
                    <el-tab-pane label="全部职位" name="all"></el-tab-pane>
                    <el-tab-pane label="发布中的职位" name="open"></el-tab-pane>
                </el-tabs>
                <div class="job-actions">
                    <span class="mr10">您的帐号可同时发布 30 个职位</span>
                    <el-button type="primary" size="small" icon="el-icon-s-promotion"
                               @click="publishJob">发布职位
                    </el-button>
                </div>
            </div>
            <div class="job-table enterprise-table">
                <div class="actions-bar">
                    <el-button type="primary" size="small" icon="el-icon-s-promotion" @click="batchDelete"
                               :disabled="!multipleSelection.length">删除
                    </el-button>
                </div>
                <div class="table-content">
                    <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            label="职位名称"
                            width="200"
                            :show-overflow-tooltip='true'>
                            <template slot-scope="scope">{{ scope.row.jobTitle }}</template>
                        </el-table-column>
                        <el-table-column
                            prop="workareaDesc"
                            label="工作地点"
                            :show-overflow-tooltip='true'
                            width="200">
                        </el-table-column>
                        <el-table-column
                            prop="pendingResumeNum"
                            label="待处理简历"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                            prop="statusText"
                            label="状态"
                            show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span :class="{'text-red' : !scope.row.state}">{{ scope.row.statusText }}</span>
                            </template>

                        </el-table-column>
                        <el-table-column
                            prop="time"
                            label="刷新时间"
                            width="180"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <a class="text-blue mr5"
                                   @click="routerLink(`/enterprise/job/publish?id=${scope.row.id}`)">修改</a>
                                <a @click="delJob(scope.row.id)">删除</a>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="table-pagination">
                    <el-pagination
                        background
                        :layout="pagination.layout"
                        :total="pagination.total"
                        :page-sizes="pagination.pageSizes"
                        :current-page.sync="pagination.page"
                        @current-change="pageChange"
                        @size-change="sizeChange"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {list, del, deleteBatchPosition} from '@/api/enterprise/work/job'
import moment from 'moment'
import {checkResponse} from '@/utils'
import {getAuthenticationStatus} from "@/api/enterprise/work/account";

export default {
    name: 'enterpriseWorkJob',
    components: {},
    data() {
        return {
            queryParam: {
                state: 1
            },
            jobActiveName: 'all',
            tableData: [],
            multipleSelection: [],
            isCheck: false,
        }
    },
    created() {
        this.init()
        this.authenticationStatus()
    },
    watch: {
        jobActiveName(val) {
            if (this.jobActiveName === 'open') {
                // this.queryParam.state = 1
            }
            this.init(true)
        }
    },
    methods: {
        init(reload = false) {
            if (reload) {
                this.requestData.page = 1
            }
            this.getList()
        },
        authenticationStatus() {
            getAuthenticationStatus().then(res => {
                if (res.datas && res.datas.auditStatus == 1) {
                    this.isCheck = true;
                }
            });
        },
        getList() {
            let obj = Object.assign({...this.queryParam}, {...this.requestData})
            if (this.jobActiveName === 'all') {
                delete obj.state
            }

            list(obj).then(res => {
                res.data.forEach(v => {
                    if (v.state == 1) {
                        v.statusText = '发布中'
                    } else if(v.state == -1) {
                        v.statusText = '审核不通过'
                    }else {
                        v.statusText = '审核中'
                    }
                    v.time = moment(v.updateTime).format('YYYY-MM-DD HH:mm:ss')
                })
                this.tableData = res.data
                this.pagination.total = res.count
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        publishJob() {
            if (!this.isCheck) {
                this.$confirm('发布职位请先上传营业执照', '提示', {
                    confirmButtonText: '前往认证',
                    cancelButtonText: '稍后',
                    type: 'warning'
                }).then(() => {
                    this.$router.push('/enterprise/account/approve');
                });
                return false;
            }
            this.routerLink('/enterprise/job/publish');
        },
        delJob(id) {
            let app = this;
            this.$confirm('此操作将永久删除该职位, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                del(id).then(res => {
                    if (checkResponse(res, true)) {
                        app.init()
                        app.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    }
                })
            })
        },
        batchDelete() {
            let app = this;
            let list = [];
            this.multipleSelection.forEach(v => [
                list.push(v.id)
            ])
            this.$confirm('此操作将永久删除职位, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBatchPosition({ids: list}).then(res => {
                    if (checkResponse(res, true)) {
                        app.init()
                        app.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    }
                })
            })
        },
    }
}
</script>
<style lang="scss" scoped="scoped">
.enter-work-job {
    background: #FFF;
    padding: 10px 20px;

    .job-content {
        position: relative;

        .job-actions {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}
</style>
